<template>
  <div class="app-user">
    <div class="user-pic">
      <div class="pic">
        <img src="../assets/images/logo.png" alt="" />
      </div>
      <div class="tit">
        <p>整理你的碎片信息</p>
      </div>
    </div>
    <div class="user-vip">
      <div class="banner" @click="isUnlock">
        <img src="../assets/images/vip-banner.png" alt="" />
        <div class="vip" v-if="isVip">尊贵VIP</div>
      </div>
    </div>
    <div class="user-tools">
      <div class="tools">
        <ul>
          <li>
            <p><span></span>备份</p>
          </li>
          <li>
            <p><span></span>回收站</p>
          </li>
          <li @click="gotoSetup">
            <p><span></span>设置</p>
          </li>
          <li>
            <p><span></span>夜间模式</p>
          </li>
          <li>
            <p><span></span>反馈</p>
          </li>
          <li>
            <p><span></span>关于</p>
          </li>
          <li @click="exit">
            <p><span></span>退出登录</p>
          </li>
        </ul>
      </div>
      <div class="exit-login" v-if="isExit"></div>
      <div class="exit" v-if="isExit">
        <p>是否退出登录</p>
        <div class="form">
          <button @click="yesExit">确定</button>
          <button @click="noExit">取消</button>
        </div>
      </div>
    </div>
    <div class="login" @click="isUnlock" v-if="Unlock"></div>

    <transition
      enter-to-class="animate__animated animate__fadeInRight"
      enter-active-class="animate__animated animate__fadeInRight"
    >
      <div class="lg-mask" v-if="Unlock">
        <h3>解锁高级版</h3>
        <div class="select">
          <button @click="isQQlogin">
            <img src="../assets/images/qq.png" alt="" /> QQ
          </button>
          <button @click="isWechatlogin">
            <img src="../assets/images/wechat.png" alt="" /> 微信
          </button>
        </div>
        <div class="phone">
          <p>使用手机号登录</p>
        </div>
      </div>
    </transition>

    <transition
      enter-to-class="animate__animated animate__fadeInRight"
      enter-active-class="animate__animated animate__fadeInRight"
      leave-to-class="animate__animated animate__fadeOutLeftBig"
      leave-active-class="animate__animated animate__fadeOutLeftBig"
    >
      <div class="qq-login" v-if="isQQ">
        <div class="return-box">
          <button @click="myReturn">«</button>
          <button>?</button>
        </div>
        <div class="form">
          <div>
            <input v-model="useraccount" type="text" placeholder="请输入账号" />
          </div>
          <div>
            <input v-model="userpassword" type="password" placeholder="密码" />
          </div>
          <div>
            <input @click="myLogin" type="submit" value="登录" />
            <button>忘记密码</button>
          </div>
        </div>
      </div>
    </transition>

    <transition
      enter-to-class="animate__animated animate__fadeInRight"
      enter-active-class="animate__animated animate__fadeInRight"
      leave-to-class="animate__animated animate__fadeOutLeftBig"
      leave-active-class="animate__animated animate__fadeOutLeftBig"
    >
      <div class="setup-box" v-if="isSetup">
        <div class="return-box2">
          <button @click="exitSetup">«</button>
          <span>设置</span>
        </div>
        <div
          @touchend="myTouchEnd"
          @touchmove.prevent="myTouchMove"
          @touchstart.capture="myTouchStart"
          class="setup"
          :style="`margin-top:${distanceY}px`"
        >
          <div class="box-1">
            <span>内容设置</span>
            <p>时间线内容显示</p>
            <p>添加笔记类型设置</p>
          </div>
          <div class="box-2">
            <span>安全锁</span>
            <p :class="isCheckbox[0].boo == true ? 'active' : ''">
              安全锁<button @click="myIsClick(0)">
                <span :style="isCheckbox[0].boo == true ? `${str}` : ''"></span>
              </button>
            </p>
          </div>
          <div class="box-3">
            <span>偏好设置</span>
            <p>首页</p>
            <p>快捷方式</p>
            <p :class="isCheckbox[1].boo == true ? 'active' : ''">
              剪切板<button @click="myIsClick(1)">
                <span :style="isCheckbox[1].boo == true ? `${str}` : ''"></span>
              </button>
            </p>
            <p :class="isCheckbox[2].boo == true ? 'active' : ''">
              进入首页立即添加<button @click="myIsClick(2)">
                <span :style="isCheckbox[2].boo == true ? `${str}` : ''"></span>
              </button>
            </p>
            <p :class="isCheckbox[3].boo == true ? 'active' : ''">
              添加按钮长按设置<button @click="myIsClick(3)">
                <span :style="isCheckbox[3].boo == true ? `${str}` : ''"></span>
              </button>
            </p>
            <p :class="isCheckbox[4].boo == true ? 'active' : ''">
              使用内置浏览器打开网页<button @click="myIsClick(4)">
                <span :style="isCheckbox[4].boo == true ? `${str}` : ''"></span>
              </button>
            </p>
          </div>
          <div class="box-4">
            <span>小部件</span>
            <p>
              日子小部件<button><span></span></button>
            </p>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  name: "User",
  data() {
    return {
      isVip: false,
      Unlock: false,
      isQQ: false,
      useraccount: "",
      userpassword: "",
      isExit: false,
      num: 0,
      isCheckbox: [
        { boo: false, num: 0 },
        { boo: false, num: 0 },
        { boo: false, num: 0 },
        { boo: false, num: 0 },
        { boo: false, num: 0 },
      ],
      str: "right: 4px;",
      isSetup: false,
      isTouchStart: false,
      startY: 0,
      distanceY: 0,
      curY: 0,
      moveY: 0,
    };
  },
  methods: {
    isQQlogin() {
      // this.Unlock = false;
      this.isQQ = true;
      this.num = 0;
    },
    isWechatlogin() {
      // this.Unlock = false;
      this.isQQ = true;
      this.num = 1;
    },
    myLogin() {
      if (this.useraccount.length == 0 || this.userpassword.length == 0) {
        alert("账号或密码不能为空");
        return false;
      }
      let pro = axios.get("data/login.json");
      pro.then((res) => {
        let data1 = res.data[0];
        let data2 = res.data[1];
        if (this.num == 0) {
          if (
            this.useraccount == data1.useraccount &&
            this.userpassword == data1.userpassword
          ) {
            this.Unlock = !this.Unlock;
            this.isQQ = !this.isQQ;
            // this.isVip = true;
            localStorage.setItem("isVip", true);
            this.useraccount = "";
            this.userpassword = "";
            this.isVip = localStorage.getItem("isVip");
            // console.log(this.isVip);
          } else {
            this.userpassword = "";
            alert("账号或密码输入不正确");
          }
        }
        if (this.num == 1) {
          if (
            this.useraccount == data2.useraccount &&
            this.userpassword == data2.userpassword
          ) {
            this.Unlock = !this.Unlock;
            this.isQQ = !this.isQQ;

            // 登录成功 设置会话存储
            localStorage.setItem("isVip", true);

            this.useraccount = "";
            this.userpassword = "";
          } else {
            this.userpassword = "";
            alert("账号或密码输入不正确");
          }
          this.isVip = localStorage.getItem("isVip");
          // console.log(this.isVip);
        }
      });
    },
    exit() {
      if (this.isVip == false) {
        alert("当前未登录");
        return false;
      }
      this.isExit = true;
    },
    yesExit() {
      // 确定退出 清空会话存储
      localStorage.clear();
      this.isVip = false;
      this.isExit = false;
    },
    noExit() {
      this.isExit = false;
    },
    myReturn() {
      this.useraccount = "";
      this.userpassword = "";
      this.isQQ = false;
      this.Unlock = !this.Unlock;
    },
    isUnlock() {
      this.isVip = JSON.parse(localStorage.getItem("isVip"))
      // console.log(this.isVip);
      if (this.isVip ==true) {
        alert("已登录,但没啥特权");
        return false;
      }
      this.Unlock = !this.Unlock;
    },
    myIsClick(i) {
      if (this.isCheckbox[i].num == 0) {
        this.isCheckbox[i].boo = true;
        this.isCheckbox[i].num = 1;
      } else {
        this.isCheckbox[i].boo = false;
        this.isCheckbox[i].num = 0;
      }
    },
    gotoSetup() {
      this.isSetup = true;
    },
    exitSetup() {
      this.isSetup = false;
    },
    myTouchStart(event) {
      this.startY = event.touches[0].pageY;
      this.isTouchStart = true;
    },
    myTouchMove(event) {
      if (this.isTouchStart) {
        this.moveY = event.touches[0].pageY;
        this.distanceY = this.moveY - this.startY + this.curY;
        this.distanceY = this.distanceY < -136 ? -136 : this.distanceY;
        this.distanceY = this.distanceY > 0 ? 0 : this.distanceY;
      }
    },
    myTouchEnd() {
      this.isTouchStart = false;
      this.curY = this.distanceY;
    },
  },
  mounted() {
    // 获取会话存储
    this.isVip = localStorage.getItem("isVip");
    // console.log(this.isVip);
    if (this.isVip == null) {
      this.isVip = false;
    }
  },
};
</script>

<style lang="less" scoped>
@bgColor: #fff;
@diyColor: #000;
.app-user {
  width: 100%;
  padding-bottom: 80px;
  .user-pic {
    width: 100%;
    padding-top: 30px;
    box-sizing: border-box;
    .pic {
      width: 100%;
      text-align: center;
      margin-bottom: 10px;
      img {
        width: 50px;
      }
    }
    .tit {
      p {
        text-align: center;
        font-size: 13px;
        letter-spacing: 17px;
      }
    }
  }
  .user-vip {
    width: 100%;
    padding: 25px 15px 0px;
    box-sizing: border-box;
    position: relative;
    .banner {
      .vip {
        position: absolute;
        right: 30px;
        top: 52px;
        color: rgb(255, 255, 255);
        border-radius: 15px;
        font-size: 15px;
        padding: 7px 12px;
        background-image: linear-gradient(#ebc1c1, #fd703e);
      }
      img {
        width: 100%;
      }
    }
  }
  .user-tools {
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    .tools {
      width: 100%;
      ul {
        li {
          padding: 20px 40px;
          box-sizing: border-box;
          p {
            font-size: 15px;
            position: relative;
            span {
              display: inline-block;
              width: 20px;
              height: 20px;
              background-image: url(../assets/images/sprite.png);
              background-repeat: no-repeat;
              background-position: 0px -2px;
              background-size: 20px;
              position: absolute;
              left: -30px;
              top: 2px;
            }
          }
          &:nth-of-type(2) {
            span {
              background-position: 0px -60px;
            }
          }
          &:nth-of-type(3) {
            span {
              background-position: 0px -184px;
            }
          }
          &:nth-of-type(4) {
            span {
              background-position: 0px -244px;
            }
          }
          &:nth-of-type(5) {
            span {
              background-position: 0px -312px;
            }
          }
          &:nth-of-type(6) {
            span {
              background-position: 0px -370px;
            }
          }
          &:active {
            background-color: #e2e2e2c9;
          }
        }
      }
    }
    .exit-login {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 10000;
    }
    .exit {
      width: 300px;
      margin: 0 auto;
      background-color: #fff;
      position: fixed;
      z-index: 100001;
      bottom: 300px;
      left: 37px;
      border-radius: 10px;
      padding: 10px 0;
      p {
        font-size: 20px;
        color: #808080;
        text-align: center;
      }
      .form {
        display: flex;
        padding-top: 20px;
        button {
          display: block;
          background-color: transparent;
          padding: 5px 20px;
          margin: 0 auto;
          font-size: 16px;
        }
      }
    }
  }
  .login {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
  }
  .lg-mask {
    width: 300px;
    background-color: #f0f0f0;
    border-radius: 15px;
    position: fixed;
    top: 200px;
    left: 22px;
    padding: 20px 15px;
    z-index: 100001;
    h3 {
      font-size: 16px;
      font-weight: bold;
    }
    .select {
      height: 100px;
      line-height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      button {
        display: block;
        font-size: 16px;
        font-weight: bold;
        background-color: transparent;
        margin: 0 30px;
        img {
          width: 22px;
          margin-right: 6px;
          margin-bottom: -3px;
        }
        &:nth-of-type(2) {
          img {
            width: 26px;
            margin-bottom: -4px;
          }
        }
      }
    }
    .phone {
      p {
        font-size: 16px;
        padding-left: 85px;
        color: #087aa0;
        font-style: italic;
      }
    }
  }
  .qq-login {
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100001;
    .return-box {
      width: 100%;
      padding: 15px 15px 0px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;

      button {
        font-size: 25px;
        background-color: transparent;
        &:nth-of-type(2) {
          border: 1px solid #ccc;
          border-radius: 50%;
          background-color: transparent;
          font-size: 15px;
          width: 30px;
          height: 30px;
        }
      }
    }
    .form {
      padding: 20px 15px;
      box-sizing: border-box;
      width: 100%;
      input {
        width: 100%;
        height: 40px;
        padding-left: 10px;
        box-sizing: border-box;
      }
      > div {
        &:nth-of-type(1) {
          input {
            border-bottom: 1px solid #ccc;
          }
        }
        &:last-child {
          display: flex;
          justify-content: space-between;
          padding-top: 20px;
          button {
            width: 40%;
            background-color: #ccc;
            padding: 5px 0;
            color: #5c5c5c;
            border-radius: 5px;
          }
          input[type="submit"] {
            background-color: #ccc;
            color: #808080;
            flex-basis: 40%;
          }
        }
      }
    }
  }
  .setup-box {
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10001;
    overflow: hidden;
    padding-top: 50px;
    .return-box2 {
      width: 100%;
      padding: 0 15px 10px;
      box-sizing: border-box;
      position: fixed;
      top: 0;
      left: 0;
      background-color: #f0f0f0;
      z-index: 1000;
      button {
        background-color: transparent;
        font-size: 25px;
        margin-right: 15px;
      }
      span {
        font-size: 20px;
      }
    }
    .setup {
      width: 100%;
      padding: 10px 15px;
      box-sizing: border-box;
      padding-bottom: 30px;
      z-index: 1;
      > div {
        background-color: #fff;
        border-radius: 15px;
        margin-bottom: 20px;
        padding: 5px 10px;
        box-sizing: border-box;
        span {
          font-size: 14px;
          color: #606060;
        }
        p {
          font-size: 16px;
          margin: 16px 0;
          box-sizing: border-box;
          position: relative;
          button {
            position: absolute;
            right: 0;
            top: 0;
            width: 45px;
            height: 22px;
            border-radius: 10px;
            background-color: #505050;
          }
          span {
            display: block;
            width: 16px;
            height: 16px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            // left: 4px;
            // right: 4px;
            top: 3px;
          }
          &.active {
            button {
              background-color: #000;
            }
          }
        }
      }
    }
  }
}
</style>